<template>
  <div class="modify-num">
    <div class="bg-c-fff">
      <h2 class="right-title rel">修改手机号码</h2>
      <form @submit.prevent="onSubmitClick">
        <ul>
          <li>
            <span>当前手机号码：</span>
            <span class="old-num">{{oldPhone}}</span>
          </li>
          <li>
            <span>新手机号码：</span>
            <input type="text" placeholder="请输入新手机号码" class="input-css input-w1" v-model='newPhone'>
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="imgcode">
            <span>验证码：</span>
            <input type="text" placeholder="请输入验证码" class="input-css input-w4" v-model="imgCode">
            <i class="iconfont icon-asterisk"></i>
            <img :src="imgCodeSrc" class="vm cup" @click="onNumberCodeImgClick">
          </li>
          <li>
            <span>短信验证码：</span>
            <input type="text" placeholder="请输入验证码" class="input-css input-w4" v-model="phoneCode">
            <i class="iconfont icon-asterisk"></i>
            <input type="button" :value="countdown | codeText" class="button blue-button" :class="{'blue-button-disabled': countdown>0}" @click="getCodeClick">
            <p class="remarks">修改成功后请使用手机登录</p>
          </li>
          <li>
            <div class="preview-box">
              <input type="submit" value="确定" class="submit button-css cup">
              <input type="button" value="取消" class="submit white-button cup" @click="cancel">
            </div>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      newPhone: '',
      imgCode: '',
      imgCodeSrc: '/member/verification/code',
      phoneCode: '',
      countdown: -1,
      countdownTimer: 0
    }
  },
  mounted() {

  },
  methods: {
    onNumberCodeImgClick() {
      this.imgCodeSrc = '/member/verification/code?r=' + Math.random()
    },
    getCodeClick() {
      if (this.countdown > 0) {
        this.$toasted.show('请稍后再重新获取验证码')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.newPhone)) {
        this.$toasted.show('请输入有效地新手机号码')
        return
      }
      if (!this.imgCode) {
        this.$toasted.show('请输入验证码')
        return
      }
      this.$http.post('/member/register/code', {
        phone: this.newPhone,
        verifyCode: this.imgCode
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('验证码已发送，请注意查收')
          this.countdown = 60
          this.countdownTimer = setInterval(() => {
            this.countdown--
              if (this.countdown <= 0) {
                this.countdown = 0
                clearInterval(this.countdownTimer)
              }
          }, 1000)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onSubmitClick() {
      if (!this.newPhone) {
        this.$toasted.show('请输入新手机号')
        return
      }
      if (!this.imgCode) {
        this.$toasted.show('请输入验证码')
        return
      }
      if (!this.phoneCode) {
        this.$toasted.show('请输入短信验证码')
        return
      }
      this.$http.post('/member/modifyPhone', {
        newPhone: this.newPhone,
        verifyCode: this.phoneCode
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('修改成功，请用新手机号登录')
          this.$router.push('/login')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancel() {
      this.$router.push('/index')
    }
  },
  computed: {
    oldPhone() {
      return this.$store.state.userInfo.phone
    }
  },
  filters: {
    codeText(v) {
      if (v === -1) {
        return '获取验证码'
      } else if (v === 0) {
        return '重新获取'
      } else {
        return '重新获取(' + v + ')'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.right-box {
  padding: 40px 30px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
}

.modify-num ul {
  padding-bottom: 110px;
  margin-top: 50px;
}

.modify-num ul li {
  padding: 10px 0;
}

.modify-num ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

.modify-num ul li .input-w1 {
  width: 500px;
}

.modify-num ul li span.old-num {
  text-align: left;
  padding-left: 20px;
  color: #a5a5a5;
}

.modify-num ul li .input-w4 {
  width: 300px;
  margin-right: 7px;
}

.icon-asterisk {
  position: relative;
  right: 35px;
  color: #ec5303;
  font-size: 25px;
  top: 3px;
}

.remarks {
  padding-left: 216px;
  color: #01378c;
  line-height: 17px;
  margin-top: 15px;
}

.preview-box {
  margin-left: 217px;
}

.preview-box .submit {
  width: 239px;
  height: 40px;
}

.preview-box input:nth-of-type(1) {
  margin-right: 20px;
}

.button {
  width: 190px;
  height: 40px;
  margin-left: -30px;
}

input::-webkit-input-placeholder {
  color: #a5a5a5;
}

.imgcode img {
  height: 40px;
  margin-left: -29px;
}

</style>
